.btn {
    font-weight: $font-weight-semibold;
    font-family: var(--font-family-primary);

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;

    &[disabled],
    &:disabled {
        cursor: not-allowed;
    }
}

.btn-primary {
    --bs-btn-padding-x: 24px;
    --bs-btn-padding-y: 16px;

    --bs-btn-bg: #{$gray-100};
    --bs-btn-color: #{$gray-900};

    --bs-btn-font-size: 18px;

    border: 0;

    &:hover {
        background: $primary-gradient-main;
    }

    &:active {
        background: $hp-gradient-active;
    }

    --bs-btn-disabled-color: #{$gray-900};
    &:disabled {
        background: #{$gray-200};
    }
}

.btn-secondary {
    --bs-btn-padding-x: 22px;
    --bs-btn-padding-y: 14px;
    --bs-btn-border-width: 2px;

    --bs-btn-bg: transparent;
    --bs-btn-color: #{$hp-white};
    --bs-btn-border-color: #{$gray-400};

    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: #{$hp-white};
    --bs-btn-hover-border-color: transparent;

    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: #{$hp-white};
    --bs-btn-active-border-color: transparent;

    --bs-btn-font-size: 18px;

    // the attached canvas for border in secondary-btn.js
    & > .secondary-btn-canvas {
        position: absolute;
        border: None;
        display: None;
    }

    &:hover {
        & > .secondary-btn-canvas {
            display: block;
        }
    }

    &:active {
        & > .secondary-btn-canvas {
            filter: brightness(65%);
            display: block;
        }
    }
}

.btn-tertiary {
    --bs-btn-bg: transparent;
    --bs-btn-color: #{$slate-tint-100};
    --bs-btn-border-color: transparent;

    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: #{$slate-tint-400};
    --bs-btn-hover-border-color: transparent;

    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: #{$slate-tint-700};
    --bs-btn-active-border-color: transparent;

    span {
        font-size: inherit;
    }

    &:active {
        @include bold_by_shadow(var(--bs-btn-active-color));
    }

    &:disabled {
        --bs-btn-disabled-border-color: transparent;
    }
}

.btn-primary-web-app, .btn-primary-marketing {
    --bs-btn-padding-x: 30px;
    --bs-btn-padding-y: 20px;

    --bs-btn-bg: #{$neon-shade-100};
    --bs-btn-color: #{$gray-100};

    --bs-btn-hover-bg: #{$neon-tint-300};
    --bs-btn-hover-color: #{$gray-100};

    --bs-btn-active-bg: #{$neon-shade-300};
    --bs-btn-active-color: #{$gray-100};

    --bs-btn-line-height: 16px;

    --bs-btn-border-color: #{$neon-shade-100};
    --bs-btn-border-width: 2px;

    &:disabled,
    &.disabled {
        color: #{$neon-shade-400};
        background-color: #{$neon-shade-700};
    }

    &:hover,
    &:active {
        @include bold_by_shadow(var(--bs-btn-hover-color));
    }
    &:active {
        @include bold_by_shadow(var(--bs-btn-active-color));
    }
    &:focus,
    &:focus-visible,
    &:focus-within {
        @include bold_by_shadow(var(--bs-btn-focus-color));
    }
}

.btn-primary-marketing {
    --bs-btn-padding-x: 24px;
    --bs-btn-padding-y: 16px;
}

.btn-secondary-web-app, .btn-secondary-marketing {
    --bs-btn-padding-x: 30px;
    --bs-btn-padding-y: 20px;

    --bs-btn-color: #{$neon-tint-500};
    --bs-btn-border-color: #{$neon-tint-500};
    --bs-btn-border-width: 2px;

    --bs-btn-hover-color: #{$neon-tint-300};
    --bs-btn-hover-border-color: #{$neon-tint-300};

    --bs-btn-active-color: #{$neon-tint-200};
    --bs-btn-active-border-color: #{$neon-tint-200};

    --bs-btn-line-height: 16px;

    &:hover {
        @include bold_by_shadow(var(--bs-btn-hover-color));
    }
    &:active {
        @include bold_by_shadow(var(--bs-btn-active-color));
    }
    &:focus,
    &:focus-visible,
    &:focus-within {
        @include bold_by_shadow(var(--bs-btn-focus-color));
    }
}

.btn-secondary-marketing {
    --bs-btn-padding-x: 24px;
    --bs-btn-padding-y: 16px;

    --bs-btn-color: #{$gray-100};
    --bs-btn-border-color: #{$gray-100};

    --bs-btn-hover-color: #{#{$gray-100}};
    --bs-btn-hover-border-color: #{$neon-tint-300};

    --bs-btn-active-color: #{$gray-100};
    --bs-btn-active-border-color: #{$neon-tint-200};
}

.btn-tertiary-web-app {
    color: #{$slate-tint-100};
    border-bottom: 2px solid transparent;
    border-radius: 0px;
    width: fit-content;
    padding: 0px;

    &:hover {
        color: #{$slate-tint-400};
        border-bottom-color: #{$slate-tint-400};
    }
    &:active {
        color: #{$slate-tint-700};
        font-weight: $font-weight-medium;
        --bs-btn-active-border-color: transparent;
        border-bottom-color: #{$slate-tint-700};
    }

    &.with-icon {
        &::after {
            content: ">";
        }
    }
}

.btn-code-toolbar {
    @extend .btn;
    @extend .btn-tertiary;
    @extend .noselect;

    @extend .z-1;

    color: inherit;
    padding: 0px;

    &:hover {
        color: #{$purple};
        text-shadow: none;
    }

    &:disabled,
    &[disabled] {
        color: #{$slate-shade-700} !important;
    }
}

.btn-copy {
    @extend .btn-code-toolbar;
    position: absolute;
    top: 4px;
    right: 4px;
}

.btn-search {
    background-color: transparent;
    border: none;
    width: 15rem;
    border-bottom: 2px solid #{$gray-300};
    color: #{$gray-100};
    padding: 0 0 calc($spacer / 2) 0;

    &:hover {
        border-bottom-color: #{$neon-shade-100};
    }

    &:disabled {
        color: #{$gray-500};
        border-bottom: #{$gray-500};
    }

    & > span {
        color: #{$neon-shade-100};
    }
}

.btn-search-input-webapp {
    gap: 0.1rem;
    font-weight: 600;

    &::before {
        content: "/";
        color: #{$slate-tint-100};
        display: inline;
        font-size: 1.5rem;
        text-shadow: none;
    }

    &:active::before {
        color: #{$slate-tint-400};
        text-shadow: none;
    }
}

.btn-search-input-marketing {
    .input {
        background: linear-gradient(265deg, #212224 20.41%, #17181A 83.75%);
      }
    
      .input-text {
        color: #{$gray-300};
      }
}

